<template>
  <van-button class="verify-btn"
    @click="btnClick"
    size="mini"
    type="primary"
    :disabled="!!codeRestTime">
    {{codeRestTime ? `${codeRestTime}S` : '发送验证码'}}
  </van-button>
</template>
<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { Button } from 'vant'
@Component({
  name: 'VerifyCodeBtn',
  components: {
    [Button.name]: Button
  }
})
export default class extends Vue {
  @Prop({ default: '发送验证码' }) private btnMsg!: string
  @Prop({ default: 60 }) private restTime!: number
  private codeRestTime:number = 0
  private btnClick () {
    this.codeRestTime = this.restTime
    let timer:any = setInterval(() => {
      --this.codeRestTime
      if (!this.codeRestTime) {
        clearInterval(timer)
        timer = null
      }
    }, 1000)
    this.$emit('sendVerifyCode')
  }
}
</script>
<style lang="scss" scoped>
.verify-btn{
    padding: 0 5px;
    min-width: 6.5em;
  }
</style>
